<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j page-notice-detail">
    <div class="content">
      <div class="crumbs">
        <router-link
          :to="{
            path: '/notice-list',
            query: {
              shopId: shopId,
              shopName
            }
          }"
          class="item-a"
        >
          {{ shopId !== 0 ? `${shopName}-` + $t('storeAnnouncement') : $t('lanhaiHeadlines') }}
        </router-link>
        <span class="arrow">></span>
        <span class="item-span">{{ noticeDet.title }}</span>
      </div>
      <div class="notic-box">
        <div class="det">
          <div class="tit">
            {{ noticeDet.title }}
          </div>
          <div class="time-box">
            <div class="text">
              {{ $t('releaseTime') }}：
            </div>
            <div class="time">
              {{ noticeDet.publishTime }}
            </div>
          </div>
          <div
            v-rich="noticeDet.content"
            class="con"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Cookie from 'vue-cookies'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const id = ref(Number(route.query.id)) // 接收公告列表id
const shopId = ref(Number(route.query.shopId) || 0)
const shopName = ref(route.query.shopName || '')
// 在当前页面点击顶部喇叭时进数据请求
watch(() => route.query, (newVal) => {
  // 监听路由是否变化
  id.value = Number(newVal.id || 0)
  shopId.value = Number(newVal.shopId)
  shopName.value = newVal.shopName
  if (id.value) {
    getNoticeDet()
  }
})

onMounted(() => {
  getNoticeDet()

  document.title = Number(shopId.value) ? $t('storeAnnouncement') : $t('lanhaiHeadlines')
})

const noticeDet = ref({}) // 公告详情
// 获取公告详情
const getNoticeDet = () => {
  let path = '/notice/info/'
  if (Cookie.get('bbcToken')) {
    path = '/p/notice/info/'
  }
  http.get(path + id.value).then(({ data }) => {
    if (!data) {
      ElMessage({
        type: 'warning',
        message: $t('notice.noticeGone'),
        duration: 1200
      })
      setTimeout(() => {
        router.push({
          path: '/notice-list',
          query: {
            shopId: shopId.value,
            shopName: shopName.value
          }
        })
      }, 1200)
      return
    }
    noticeDet.value = data
  })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
